<template>
  <div class="fenye">
    <ul class="message_content" :style="{ top }">
      <li class="data" v-for="item in list" :key="item.id">
        <div style="flex:2">{{item.name}}</div>
        <div style="flex:3;text-align: center;">
          <span style="color:#06FFFF">{{item.money}}</span>元
        </div>
        <div style="flex:2">{{item.company}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      // 列表数据
      list: [
        { name: "业务招待费", money: "230,000", company: "【集团本部】" },
        { name: "公车费", money: "30,000", company: "【集团本部】" },
        { name: "因公出国费", money: "1450,000", company: "【集团本部】" },
        { name: "招待费", money: "230,000", company: "【集团本部】" },
        { name: "出差费", money: "67,836,000", company: "【集团本部】" },
      ],
    };
  },
  created() {},
  computed: {
    top() {
      return -this.activeIndex * 45 + "px";
    },
  },
  mounted() {
    let _this = this;
    setInterval(function () {
      if (_this.activeIndex < _this.list.length - 1) {
        _this.activeIndex += 1;
      } else {
        _this.activeIndex = 0;
      }
    }, 2000);
  },
};
</script>
<style lang="less" scoped>
.fenye {
  height: 250px;
  overflow: hidden;
  position: relative;
}
.message_content {
  position: relative;
  height: 250px;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
  margin-top: 0;
}
.data {
  display: flex;
  padding: 0 16px;
  background: rgba(10, 70, 242, 0.2);
  height: 45px;
  line-height: 45px;
  font-size: 19px;
  color: white;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
}
.data:nth-child(odd) {
  background: #0a46f2;
}
</style>